<!--
 * @Author: wangmingshuo
 * @Date: 2020-04-22 16:32:38
 * @LastEditTime: 2020-08-13 15:46:31
 * @FilePath: /myLittleNest/components/Nav/index.vue
 -->
<template>
	<div>
		<nav :class="{ scrollTop: scrollTop }">
			<div class="root">
				<div class="logo">CREATIVE CV</div>
				<div class="route">
					<ul>
						<li v-for="(item, index) in routeList" :key="index" @click="$router.push(item.path)">
							{{ item.name }}
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: false,
			routeList: [
				{
					name: '首页',
					path: '/about',
				},
				{
					name: '学习笔记',
					path: '/blogs',
				},
				{
					name: '关于我的',
					path: '/',
				},
			],
		};
	},
	mounted() {
		//给window添加一个滚动滚动监听事件
		window.addEventListener('scroll', this.handleScroll);
	},
	methods: {
		handleScroll() {
			var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			if (scrollTop <= 62) {
				this.scrollTop = false;
			} else {
				this.scrollTop = true;
			}
		},
	},
	components: {},
};
</script>

<style scoped lang="scss">
div {
	width: 100%;

	nav {
		position: fixed;
		top: 0;
		width: 100%;
		height: 62px;
		box-sizing: border-box;
		padding: 15px 0;
		line-height: 32px;
		// background: rgba(255, 255, 255, 0.2);
		z-index: 999;

		& > .root {
			width: 1200px;
			margin: 0 auto;

			& > div {
				color: #ffffff;
				font-size: 0.7142em;

				&.logo {
					float: left;
					width: 200px;
					font-size: 16px;
					font-weight: 400;
					cursor: pointer;
				}

				&.route {
					box-sizing: border-box;

					& > ul {
						float: right;

						& > li {
							float: left;
							padding: 0px 20px;
							margin-left: 15px;
							cursor: pointer;
							border-radius: 3px;
							font-size: 12px;
							text-transform: uppercase;
							letter-spacing: 2px;
							font-weight: normal;
						}

						& > li:hover {
							color: #fff;
							background-color: rgba(255, 255, 255, 0.2);
						}
					}
				}
			}
		}
	}

	nav.scrollTop {
		background: #378c3f !important;
	}
}
</style>
